<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>耿哥商场</title>

	<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
	<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link type="text/css" href="../css/optstyle.css" rel="stylesheet" />
	<link type="text/css" href="../css/style.css" rel="stylesheet" />

	<script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="../basic/js/quick_links.js"></script>

	<script type="text/javascript" src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
	<script type="text/javascript" src="../js/jquery.imagezoom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.flexslider.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="../js/axiosUtil.js"></script>
</head>

<body>


	<div id="app1">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<template v-if="!islogin">
						<div class="menu-hd">
							<a href="login.html" target="_top" class="h">亲，请登录</a>
							<a href="register.html" target="_top">免费注册</a>
						</div>
					</template>
					<template v-else>
						<div class="menu-hd">
							<a href="#" style="color: red;">{{username}}</a>
							<a href="#" @click="logout">退出登录</a>
						</div>
					</template>
				</div>
			</ul>
			<ul class="message-r" v-if="islogin">
				<div class="topMessage home">
					<div class="menu-hd"><a href="home.html" target="_top" class="h">商城首页</a></div>
				</div>
				<template v-if="islogin">
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i
									class="am-icon-user am-icon-fw"></i>个人中心</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
									class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
									id="J_MiniCartNum" class="h">0</strong></a></div>
					</div>
				</template>
			</ul>
		</div>

		<!--悬浮搜索框-->

		<div class="nav white">
			<div class="logo"><img src="../images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="../images/logobig.png" /></li>
			</div>
			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
						autocomplete="off">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
				</form>
			</div>
		</div>
	</div>

	<div class="clear"></div>
	<b class="line"></b>
	<div class="listMain">

		<!--分类-->
		<div class="nav-table">
			<div class="long-title"><span class="all-goods">全部分类</span></div>
			<div class="nav-cont">
				<ul>
					<li class="index"><a href="#">首页</a></li>
					<li class="qc"><a href="#">闪购</a></li>
					<li class="qc"><a href="#">限时抢</a></li>
					<li class="qc"><a href="#">团购</a></li>
					<li class="qc last"><a href="#">大包装</a></li>
				</ul>

			</div>
		</div>
		<ol class="am-breadcrumb am-breadcrumb-slash">
			<li><a href="home.html">首页</a></li>
			<li class="am-active">商品详情</li>
		</ol>

		<!--放大镜-->

		<div class="item-inform" id="app2">
			<div class="clearfixLeft" id="clearcontent">

				<div class="tb-booth tb-pic tb-s310">
					<img :src="good.img" class="jqzoom" style="width:400px;height:400px;" />
				</div>

				<div class="clear"></div>
			</div>

			<div class="clearfixRight">

				<!--规格属性-->
				<!--名称-->
				<div class="tb-detail-hd">
					<h1>
						{{good.name}}
					</h1>
				</div>
				<div class="tb-detail-list">
					<!--价格-->
					<div class="tb-detail-price">
						<!-- <li class="price iteminfo_price">
							<dt>促销价</dt>
							<dd><em>¥</em><b class="sys_item_price">56.90</b> </dd>
						</li> -->
						<li style="margin-top: -30px;">
							<dt>原价</dt>
							<dd><em>¥</em><b class="sys_item_price">{{good.price}}</b></dd>
						</li>
						<li>
							<dt>库存</dt>
							<dd>{{good.stock}} 件</dd>
						</li>
						<div class="clear"></div>
					</div>


					<div class="clear"></div>
					<p style="margin-top: 10px;">
						<span style="color: red;">商品详情: </span>{{good.detail}}
					</p>
					<!--各种规格-->
					<dl class="iteminfo_parameter sys_item_specpara">

						<dd>
							<!--操作页面-->
							<div class="theme-popover" style="margin-top: 10px;">
								<span class="cart-title number">购买数量: </span><input type="number" v-model="num"> <br>
								<div class="clear"></div>
							</div>

						</dd>
					</dl>
					<div class="clear"></div>
					<!--活动	-->

				</div>

				<div class="pay">

					<!-- <li>
				<div class="clearfix tb-btn tb-btn-buy theme-login">
					<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
				</div>
			</li> -->

					<li>
						<div class="clearfix tb-btn tb-btn-basket theme-login">
							<a id="LikBasket" title="加入购物车" href="#" @click="addCart"><i></i>加入购物车</a>
						</div>
					</li>
				</div>

			</div>
			<div class="clear"></div>

		</div>



		<div class="footer">
			<div class="footer-hd ">
				<p>
					<a href="# ">燕园科技</a>
					<b>|</b>
					<a href="home.html">商城首页</a>
					<b>|</b>
					<a href="# ">支付宝</a>
					<b>|</b>
					<a href="# ">物流</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<a href="#">关于燕园</a>
					<a href="# ">合作伙伴</a>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
					<em>© 2020-2020 shop.ysu.edu 耿志龙 版权所有</em>
				</p>
			</div>
		</div>

	</div>
	</div>
	<script src="../js/public.js"></script>
	<script>
		var vm2 = new Vue({
			el: '#app2',
			data: {
				islogin: false,
				username: '',
				id: '',
				good: {
					name: '良品铺子 手剥松子218g 坚果炒货 巴西松子',
					price: 98.00,
					stock: 1000,
					img: '../images/01_mid.jpg',
					detail: `良品铺子 手剥松子218g 坚果炒货 巴西松子良品铺子 手剥松子218g 坚果炒货 巴西松子良品铺子 手剥松子218g 坚果炒货 巴西松子`
				},
				num: 1
			},
			computed: {

			},
			created() {
				this.id = window.localStorage.getItem('goodId')
				if (this.id) {
					this.getData()
				}
			},
			methods: {
				getData() {
					$axios.get(`/shop/goods/${this.id}`,
						response => {
							this.good = response.data
						}
					)
				},
				addCart() {
					let token = window.localStorage.getItem('token')
					if (token) {
						$axios.post('/shopping-cart',
							response => {
								window.location.href = 'shopcart.html'
							},
							{
								productId: this.id,
								productName: this.good.name,
								productPrice: this.good.price,
								image: this.good.img,
								quantity: this.num
							}
						)
					} else {
						window.alert('亲，你还没有登录呢')
					}
				}
			}
		})
	</script>
</body>

</html>